<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
// import { reactive, ref } from 'vue'

// import type { FormInstance, FormRules } from 'element-plus'
// console.log('isNull', isNull('hello'))
const comp = getCurrentInstance()
// 打印看一下结构
console.log('comp', comp.appContext.config.globalProperties.$utils.isNull(''))

import { useRouter } from 'vue-router';
const router = useRouter()

const { proxy } = getCurrentInstance()

const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
  name: ''
})

const rules = reactive({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ]
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
	console.log('valid', valid)
    if (valid) {
      console.log('submit!')
	  router.push('/home')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
